<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>城南花已开</title>
    <!-- 引入动画库文件 -->
    <link rel="stylesheet" href="./css/animate.css">
    <!-- 引入swiper的样式文件 -->
    <link rel="stylesheet" href="./swiper/css/swiper.min.css">
    <!-- 引入自定义样式文件 -->
    <link rel="stylesheet" href="./css/style.css">
    <!-- 引入 swiper 动画js文件 -->
    <script src="./js/swiper.animate1.0.3.min.js"></script>
    <!-- 引入swiper.js 文件 -->
    <script src="./swiper/js/swiper.min.js"></script>
    <!-- 引入jQuery -->
    <script src="./js/jquery-1.11.2.min.js"></script>
</head>

<body>

    <div class="swiper-container">
        <div class="swiper-wrapper">

            <div class="swiper-slide">
                <div class="page-cover">
                    <!-- 把css动画类写在 swiper-animate-effect -->
                    <h1 class="ani title-1" swiper-animate-effect="animate__animated animate__backInDown">时间就像海绵里的水
                        <br> 挤挤总会有的 </h1>
                    <img class="ani p1" swiper-animate-effect="animate__animated animate__backInLeft" swiper-animate-delay="0.5s" src="./images/7.jpg" alt="">
                    <img class="ani p1" swiper-animate-effect="animate__animated animate__backInRight" swiper-animate-delay="0.5s" src="./images/8.png" alt="">
                    <img class="ani p1" swiper-animate-effect="animate__animated animate__backInLeft" swiper-animate-delay="1s" src="./images/9.png" alt="">
                    <img class="ani p1" swiper-animate-effect="animate__animated animate__backInRight" swiper-animate-delay="1s" src="./images/10.png" alt="">
                    <img class="ani p1" swiper-animate-effect="animate__animated animate__backInLeft" swiper-animate-delay="1.5s" src="./images/11.jpg" alt="">
                    <img class="ani p1" swiper-animate-effect="animate__animated animate__backInRight" swiper-animate-delay="1.5s" src="./images/12.jpg" alt="">
                    <div class="ani button-1" swiper-animate-effect="animate__animated animate__backInUp" swiper-animate-delay="2s"> 按钮</div>
                </div>
            </div>

            <div class="swiper-slide">
                <div class="page-cover">
                    <h1 class="ani title-1" swiper-animate-effect="animate__animated animate__backInDown">时间就像海绵里的水
                        <br> 挤挤总会有的 </h1>
                    <img class="ani p1" swiper-animate-effect="animate__animated animate__backInLeft" swiper-animate-delay="0.5s" src="./images/1.jpg" alt="">
                    <img class="ani p1" swiper-animate-effect="animate__animated animate__backInRight" swiper-animate-delay="0.5s" src="./images/2.jpg" alt="">
                    <img class="ani p1" swiper-animate-effect="animate__animated animate__backInLeft" swiper-animate-delay="1s" src="./images/3.jpg" alt="">
                    <img class="ani p1" swiper-animate-effect="animate__animated animate__backInRight" swiper-animate-delay="1s" src="./images/4.jpg" alt="">
                    <img class="ani p1" swiper-animate-effect="animate__animated animate__backInLeft" swiper-animate-delay="1.5s" src="./images/5.jpg" alt="">
                    <img class="ani p1" swiper-animate-effect="animate__animated animate__backInRight" swiper-animate-delay="1.5s" src="./images/6.jpg" alt="">
                    <div class="ani button-1" swiper-animate-effect="animate__animated animate__backInUp" swiper-animate-delay="2s"> 按钮</div>
                </div>
            </div>

            <div class="swiper-slide">
                <div class="page-cover">
                    <h1 class="ani title-1" swiper-animate-effect="animate__animated animate__backInDown">时间就像海绵里的水
                        <br> 挤挤总会有的 </h1>
                    <img class="ani p1" swiper-animate-effect="animate__animated animate__backInLeft" swiper-animate-delay="0.5s" src="./images/14.jpg" alt="">
                    <img class="ani p1" swiper-animate-effect="animate__animated animate__backInRight" swiper-animate-delay="0.5s" src="./images/15.jpg" alt="">
                    <img class="ani p1" swiper-animate-effect="animate__animated animate__backInLeft" swiper-animate-delay="1s" src="./images/16.jpg" alt="">
                    <img class="ani p1" swiper-animate-effect="animate__animated animate__backInRight" swiper-animate-delay="1s" src="./images/17.jpg" alt="">
                    <img class="ani p1" swiper-animate-effect="animate__animated animate__backInLeft" swiper-animate-delay="1.5s" src="./images/18.jpg" alt="">
                    <img class="ani p1" swiper-animate-effect="animate__animated animate__backInRight" swiper-animate-delay="1.5s" src="./images/19.jpg" alt="">
                    <div class="ani button-1" swiper-animate-effect="animate__animated animate__backInUp" swiper-animate-delay="2s"> 按钮</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 翻页提示箭头 -->
    <div id="nextbtn">
        <img src="./images/arrow.jpg" alt="">
    </div>
    <!-- 音乐图标 -->
    <img src="./images/music-icon.jpg" id="music_icon" alt="">
    <!-- 音乐 -->
    <audio src="./audio/music.mp3" id="audio"></audio>

    <!-- 引入音乐播放的js文件 ，注意一定要在audio下引入-->
    <script src="./js/playmusic.js"></script>
    <script>
        // 初始化swiper
        new Swiper('.swiper-container', {
            direction: 'vertical',
            on: {
                init: function() {
                    swiperAnimateCache(this); //隐藏动画元素 
                    swiperAnimate(this); //初始化完成开始动画
                },
                slideChangeTransitionEnd: function() {
                    swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
                    //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
                }
            }
        })
    </script>
</body>

</html>